<template>
  <div class="search">
    <h1>公告管理</h1>
    <hr style="border: 1px solid rgb(240, 240, 240)" />
    <span>公告标题</span>
    <el-input
      v-model="form.title"
      style="width: 200px; margin-right: 40%"
      placeholder="请输入"
    />
    <el-button type="primary" @click="searchAnnouncements">查询</el-button>
    <el-button type="default" @click="reset">重置</el-button>
  </div>

  <div class="page">
    <div class="page-header">
      <div class="page-header-left">
        <span>公告列表</span>
      </div>
      <div class="page-header-right">
        <el-button
          type="primary"
          style="margin-top: 1rem"
          @click="to('tenement/newAnnounce')"
          >+&nbsp;新建</el-button
        >
        <el-button type="default" style="margin-top: 1rem; margin-right: 3rem"
          >批量操作</el-button
        >
      </div>
    </div>

    <!-- 公告列表表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="selection" />
      <el-table-column prop="title" label="公告标题" />
      <el-table-column prop="author" label="作者" />
      <el-table-column prop="anStatus" label="发布状态" />
      <el-table-column label="紧急程度">
        <template #default="{ row }">
          {{ row.emExtend === 1 ? "非常紧急" : row.emExtend === 2 ? "紧急" : row.emExtend === 3 ? "一般" : "未知" }}
        </template>
      </el-table-column>
      <el-table-column prop="aread" label="已读" />
      <el-table-column prop="aunread" label="未读" />
      <el-table-column prop="publisher" label="发布人" />
      <el-table-column prop="anDate" label="发布日期" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button @click="openDetailDialog(row.id)" type="text"
            >编辑</el-button
          >
          <el-button @click="deleteAnnouncement(row.id)" type="text"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        v-model:current-page="pageNum"
        v-model:page-size="pageSize"
        :page-sizes="[5, 10, 20]"
        style="margin-bottom: 2rem"
        background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalCount"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "vue";
import { ElTable, ElMessage } from "element-plus";
import to from "@/utils/to.js";
import axios from "axios";
import router from "@/router";

// 定义表单对象并使其响应式
const form = reactive({
  title: "",
  author: "",
  anStatus: "",
  emExtend: "",
  a_read: "",
  a_unread: "",
  publisher: "",
  an_date: "",
});

const pageSizeOptions = [5, 10, 20];
const tableData = ref([]);
const totalCount = ref(0);
const pageNum = ref(1);
const pageSize = ref(pageSizeOptions[0]);

const Value = ref("");

const searchAnnouncements = async () => {
  try {
    const response = await axios.get(
      `http://localhost:8080/property/announce/pageQuery`,
      {
        headers: {
          Authorization: localStorage.getItem("token"),
        },
        params: {
          page: pageNum.value,
          pageSize: pageSize.value,
          title: form.title,
          author: form.author,
          anStatus: form.anStatus,
          emExtend: form.emExtend,
          a_read: form.a_read,
          a_unread: form.a_unread,
          publisher: form.publisher,
          an_date: form.an_date,
        },
      }
    );
    console.log(response);
    tableData.value = response.data.data.records;
    totalCount.value = response.data.data.total;
  } catch (error) {
    console.error("查询区域列表失败:", error);
  }
};

const deleteAnnouncement = (id) => {
  const config = {
    url: `http://localhost:8080/property/announce/remove/${id}`,
    method: "DELETE",
    headers: {
      Authorization: localStorage.getItem("token"),
    },
  };

  const response = axios(config);
  response
    .then((data) => {
      if (data.data.code === 1) {
        ElMessage({
          message: "数据删除成功",
          type: "success",
        });
        setTimeout(() => {
          searchAnnouncements();
        }, 2000);
      }
    })
    .catch((error) => {
      console.log(error);
    });
};

const dialogVisible = ref(false);
const detailDialogVisible = ref(false);
const detailData = ref({});

const reset = () => {
  form.title = "";
  form.author = "";
  form.anStatus = "";
  form.emExtend = "";
  form.a_read = "";
  form.a_unread = "";
  form.publisher = "";
  form.an_date = "";

  pageNum.value = 1;
  pageSize.value = pageSizeOptions[0];

  searchAnnouncements();
};

const handleSizeChange = (newSize) => {
  pageSize.value = newSize;
  searchAnnouncements();
};

const handleCurrentChange = (newPage) => {
  pageNum.value = newPage;
  searchAnnouncements();
};
// 初始化加载
searchAnnouncements();

const openDetailDialog = (id) => {
  router.push({ path: "/backend/tenement/newAnnounce", query: { id: id } });
};
</script>

<style scoped>
.search {
  background-color: white;
  padding-bottom: 2rem;
  height: auto;
  margin-top: 2rem;
}

h1 {
  font-size: 2rem;
  font-weight: 600;
  padding: 2rem 0 10px 4rem;
}

span {
  display: inline-block;
  font-size: 15px;
  margin-top: 2rem;
  margin-left: 3rem;
  margin-right: 1rem;
  height: 24px;
}

.page {
  background-color: white;
  height: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  display: flex;
  margin-top: 2rem;
  justify-content: center;
}
</style>
